<template>
  <div style="text-align: center" class="box">
    <template>
      <div class="box1">
        商品搜索：
        <el-select v-model="value" placeholder="请选择查询的商品" @change="selectGoods">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="mohu">模糊查询：</span>
        <el-input
          class="box2"
          v-model="input"
          @change="fuzzy"
          placeholder="请输入想找的商品"
        ></el-input>
      </div>
    </template>

    <el-table 
   
      :data="dataList.data"
      stripe
      border
      style="width: 1175px"
      max-height="500"
      @row-dblclick="dblclick"
    >
      <el-table-column prop="id" label="商品ID" width="70"> </el-table-column>
      <el-table-column label="商品图片" prop="mainImage" width="100">
        <template v-slot:default="scope">
          <img style="height: 60px; width: 60px" :src="scope.row.mainImage" />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="商品名称" width="300"></el-table-column>
      <el-table-column label="销售价格" width="100"> 
        <template slot-scope="scope">
          <span>￥{{(scope.row.price/100).toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="saleQuantity" label="销量" width="70"> </el-table-column>
      <el-table-column prop="attributes" label="属性" width="400"> </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button size="small " type="primary" @click="dblclick(scope.row)" style="margin: 10px"
            >修改商品</el-button
          >
          <el-button size="small " type="danger" @click="handleDelete(scope.row)"
            >下架商品</el-button
          >
        </template></el-table-column
      >
    </el-table>
    <template>
      <div style="margin-top: 30px">
        <el-pagination
          @current-change="change"
          background
          layout="prev, pager, next"
          :page-count="Math.ceil(dataList.total / 20)"
        >
        </el-pagination>
      </div>
    </template>
    <template>
      <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="商品ID">
            <el-input autocomplete="off" disabled :value="modification.id"></el-input>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="商品图片地址">
            <el-input autocomplete="off" v-model="modification.mainImage"></el-input>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="商品名称">
            <el-input autocomplete="off" v-model="modification.name"></el-input>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="销售价格">
            <el-input autocomplete="off" v-model="modification.price"></el-input>
          </el-form-item>
        </el-form>
        <!-- <el-form>
          <el-form-item label="属性">
            <el-input v-model="modification.attributes"></el-input>
          </el-form-item>
        </el-form> -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="reset">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
export default {
  name: "GoodsList",

  data() {
    //   page =1,

    return {
      dialogFormVisible: false,
      //要修改的内容
      modification: {
        id: "",
        mainImage: "",
        name: "",
        price: "",
        saleQuantity: "",
        attributes: "",
      },
      input: "",
      page: 1,
      size: 20,
      category: "冰箱",
      dataList: [],
      options: [
        {
          value: "冰箱",
          label: "冰箱",
        },
        {
          value: "厨卫",
          label: "厨卫",
        },
        {
          value: "电视",
          label: "电视",
        },
        {
          value: "激光",
          label: "激光",
        },
        {
          value: "聚享家",
          label: "聚享家",
        },
        {
          value: "空净",
          label: "空净",
        },
        {
          value: "狂欢",
          label: "狂欢",
        },
        {
          value: "冷柜",
          label: "冷柜",
        },
        {
          value: "手机",
          label: "手机",
        },
        {
          value: "洗衣机",
          label: "洗衣机",
        },
      ],
      value: "",
    };
  },
  created() {
    this.render();
  },

  methods: {
    handleDelete(a) {
      this.$request.delete("/goods/delete", {
        data: {
          id: [a.id],
        },
      });
      // console.log(a.id);
      this.render();
    },
    //提交修改后的内容
    async reset() {
      console.log(this.modification);
      await this.$request.put("/goods/updategoods", {
        id: this.modification.id,
        data: {
          mainImage: this.modification.mainImage,
          name: this.modification.name,
          price: this.modification.price,
          saleQuantity: this.modification.saleQuantity,

          // attributes: this.modification.attributes,
        },
      });
      this.modification = {};
      this.dialogFormVisible = false;
      this.render();
      this.$message({
        message: "修改商品成功！",
        type: "success",
      });
    },
    //双击获取当前行的内容
    dblclick(message) {
      this.modification.id = message.id;
      this.modification.mainImage = message.mainImage;
      this.modification.name = message.name;
      this.modification.price = message.price;
      this.modification.saleQuantity = message.saleQuantity;
      // this.modification.attributes = message.attributes.join("");
      this.dialogFormVisible = true;
      // console.log(this.modification);
      // console.log(this.modification);
      // return true;
      // this.$message({
      //   message: "账号或密码不能为空！",
      //   center: true,
      //   type: "error",
      // });
    },
    //模糊查询
    fuzzy(a) {
      this.page=1
      console.log(a);
      (this.page = 1), (this.size = 20), (this.name = a), (this.dataList = []);
      // this.render();
      this.$request
        .post("/goods/selectgoods", {
          name: a,
          page: this.page,
          size: this.size,
        })
        .then(({ data: { ret: data } }) => {
          this.dataList = data;
          console.log(this.dataList);
        });
    },
    //下拉查询
    selectGoods(a) {
      console.log(a);
      (this.page = 1), (this.size = 20), (this.category = a), (this.dataList = []);
      this.render();
    },
    //改变页数的时候重新渲染页面
    change(a) {
      //   console.log(a);
      this.page = a;
      this.render();
      //   this.$store.commit("a");
    },
    render() {
      this.$request
        .post("/goods/goodsall", {
          category: this.category,
          page: this.page,
          size: this.size,
        })
        .then(({ data: { ret: data } }) => {
          this.dataList = data;
          console.log(this.dataList);
        });
    },
  },
};
</script>
<style scoped>
.box1 {
  text-align: left;
  margin-top: -15px;
  margin-bottom: 10px;
}
.mohu {
  margin-left: 150px;
}
.box2 {
  /* margin-left: 150px; */
  width: 250px;
}
</style>
